<template>
  <div>
    <div class="box1">
      <!-- 插值表达式语法 -->
      消息：{{ msg }}  
      判断：{{ flag ? "真" : "假" }}  
      {{ msg.split("").reverse() }}
    </div>

    <div class="box2">
      <!-- v-once：只渲染一次，之后忽略后续 msg 的变化 -->
      <div v-once>{{ msg }}</div>

      <!-- v-text：相当于给元素 textContent 赋值 -->
      <p v-text="msg"></p>

      <!-- 普通插值，会随 msg 变化而更新 -->
      <p>段落{{ msg }}</p>

      <!-- v-html：把字符串当作 HTML 片段插入 -->
      <span v-html="content"></span>

       <a v-bind:href="link1">淘宝</a><br>
      <a v-bind:href="link+'?username=zl&password=123'">百度</a>
      <!-- v-bind:title='tip'鼠标悬浮在上面会有提示 -->
      <div v-bind:title='tip' id="tips">绑定tips属性</div>
      <!-- v-bind可以省略不写 -->
      <div :title='tip+"后面还能添加"' id="tips1">绑定tips属性</div>
      <a :[attr]="link">测试动态参数</a>
    </div>
    <!-- @click 是 v-on:click 的简写，绑定点击事件 -->
    
     <button v-on:click="changeMsg('你好好哈哈哈哈')">修改数据</button>
     <!-- blur 当长方形文本框失去焦点是触发changediv函数 -->
     <input type="text" @blur="changediv">
  </div>
</template>


<script>
console.log('nihao ')
export default {
   data(){
    return{
        //定义数据
        msg:"hello world",
        flag:true,
        content:"<h1 style='color:red'>测试v-html显示</h1>",
        link:"https://www.baidu.com",
        link1:"https://www.taobao.com",
        tip:'这是一个提示',
        attr:"href"//后面也可以加title等，动态变化
        
    }
   },
   methods:{
    //定义函数
    changeMsg(para){
        // console.log(this.msg)
        // this.msg="你好"
        console.log(para)
        // this.msg=para
    },
    changediv(){
        this.tip='那是一个提示'
        console.log("失去焦点关注调用changediv")
    }
   }
}
</script >
<style scoped>

p{
    color:red;
}
#tips {
  width: 100px;
  height: 100px;
  color: blue;
  font-size: 10px;
  background: yellowgreen;

  /* 水平居中 */
  text-align: center;

  /* 垂直居中：用 line-height 等于容器高度 */
  line-height: 100px;
}
#tips1 {
  width: 100px;
  height: 100px;
  color: blanchedalmond;
  font-size: 10px;
  background: rgb(15, 72, 156);

  /* 水平居中 */
  text-align: center;

  /* 垂直居中：用 line-height 等于容器高度 */
  line-height: 100px;
}

</style>